<template>
  <div class="detail app-container bg-transparent" :style="{height: activeName === 'basic' ? 'calc(100vh - 294px)' : 'initial'}">
    <top-card v-loading="loading" :info="clientInfo" />
    <el-tabs v-model="activeName" :class="['mt20', activeName === 'file' ? 'tab-file' : '']" @tab-click="handleClick">

      <el-tab-pane label="企业工商信息" name="info">
        <info-card :corp-id="id" :info="clientInfo" />
      </el-tab-pane>
      <el-tab-pane label="环保基础信息" name="basic">
        <corp-card :corp-id="id" />
      </el-tab-pane>
      <!-- <el-tab-pane v-if="busiType.includes('environment')" label="环保基础信息" name="env">
        <env-card :cert-no="certNo" />
      </el-tab-pane>
      <el-tab-pane v-if="busiType.includes('safe')" label="安全基础信息" name="security">
        <security-card :cert-no="certNo" />
      </el-tab-pane> -->
      <el-tab-pane label="巡查记录" name="serving">
        <task-list v-if="!loading" :corp-name="clientInfo.COMPANY_NM" :corp-id="id" />
      </el-tab-pane>
      <el-tab-pane label="问题追踪" name="accident">
        <accident-list :cert-no="certNo" :corp-id="id" />
      </el-tab-pane>
      <!-- <el-tab-pane label="客户档案" name="file">
        <file :cert-no="certNo" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
import { getClientDetail } from '@/api/client/client'

import TopCard from './TopCard'
import CorpCard from './CorpCard'
import InfoCard from './InfoCard'
import EnvCard from './EnvCard'
import SecurityCard from './SecurityCard'
import TaskList from '../../task/list/index'
import AccidentList from '../accident/list/index'

export default {
  name: 'ClientDetail',
  components: { TopCard, CorpCard, InfoCard, EnvCard, SecurityCard, TaskList, AccidentList },
  props: {
    certNo: {
      type: String,
      required: true
    },
    busiType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: true,
      id: null,
      clientInfo: {},
      activeName: 'basic'
    }
  },
  created() {
    this.id = this.$route.params.id
    this.loadData()
  },
  methods: {
    async loadData() {
      const { data } = await getClientDetail({ certNo: this.certNo })
      this.clientInfo = data.data[0]
      this.loading = false
    },
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.detail {
  padding: 20px;
  // height: calc(100vh - 84px);
  ::v-deep .el-tabs {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 55px);
      .el-tab-pane {
        height: 100%
      }
    }
  }
  ::v-deep .input {
    width: 400px;
  }
  ::v-deep .pars-table {
    width: 800px;
    margin-bottom: 20px;
  }
  ::v-deep .line-one .el-form-item__label {
    line-height: 1.2;
  }
  ::v-deep .footer {
    flex-shrink: 0;
    width: 100%;
    padding: 10px 15px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    border-top: 1px solid $border-color;
    z-index: 2;
    .btn {
      padding: 5px 20px;
      border: 1px solid $border-color;
      border-radius: 3px;
      font-size: 14px;
      margin: 0 20px;
      cursor: pointer;
    }
    .confirm {
      color: #fff;
      background-color: $primary-color;
    }
    .submit {
      color: #fff;
      background-color: $success-color;
    }
    .terminate {
      color: #fff;
      background-color: $danger-color;
    }
  }
}

::v-deep .el-tabs {
  .el-tabs--left .el-tabs__header.is-left {
    margin-right: 20px;
  }
  .el-collapse-item__header {
    color: $label-color;
    font-size: 16px;
    font-weight: 600;
  }
  .el-tabs__content {
    font-size: 13px;
  }
  &.tab-file .el-tabs__content {
    overflow: visible;
  }
}
</style>
